<template>
    <div class="content-bar">

        <slot name="title">

        </slot>
        <slot name="operation">

        </slot>

        <slot name="content">

        </slot>

        <slot name="bottom">

        </slot>


    </div>
</template>
    
<script setup lang='ts'>

    const props = defineProps({
    contentHeight: {
        type: String,
        default: "85%"
    },
    contentLeft: {
        type: String,
        default: "25px",
    },
    contentTop: {
        type: String,
        default: "25px",
    },
    contentRight: {
        type: String,
        default: "25px"
    },
    contentWidth: {
        type: String,
        default: "calc(100% - 50px)"
    },
    backgroundColor: {
        type: String,
        default: "white"
    }


})

const height = props.contentHeight
const left = props.contentLeft
const top = props.contentTop
const width = props.contentWidth
const right = props.contentRight
const bgc = props.backgroundColor


</script>
    
<style scoped>
.content-bar {
    width: v-bind(width);
    left: v-bind(left);
    top: v-bind(top);
    margin-right: v-bind(right);
    margin-top: 10px;
    background-color: v-bind(bgc);
    border-radius: 12px;
    height: v-bind(height);

}
</style>